<template>
  <div class="headerNav">
    <div
      class="noBreak"
      :class="{ active: id === index }"
      @click="handleSelect(item.path, index, item.SearchInfo)"
      v-for="(item, index) in headerData"
      :key="index"
    >
      {{ item.name }}
    </div>
    <span class="line" :style="` left:${110 * id + 48}px`"></span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: 0 // 控制选中样式序号
    }
  },
  props: {
    headerData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    handleSelect(path, index, SearchInfo) {
      if (this.id === index) return
      this.id = index
      // this.$store.commit('updataDiscoverPageId', index)
      // console.log(SearchInfo)
      this.$emit('handleRouter', path, SearchInfo)
    }
  },
  created() {
    // 控制刷新后nav底部红线在对应的nav下，不然会回到第一个
    this.headerData.forEach((item, index) => {
      // console.log(item.path === this.$route.path, item.path, this.$route.path)
      if (item.path === this.$route.path) {
        this.id = index
        // console.log(this.id)
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.headerNav {
  display: flex;
  height: 46px;
  font-size: 16px;
  align-items: center;
  padding-left: 30px;
  position: relative;
  // margin-top: 20px;
  background-color: #fff;
  div {
    width: 100px;
    height: 100%;
    text-align: center;
    box-sizing: border-box;
    padding: 10px;
    margin-right: 10px;
    border-radius: 10px;
    // border: 1px solid #e5e5e5;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      background-color: #ccc;
    }
  }
}
.active {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  // border-bottom: 3px solid #ec4141;
}
.line {
  width: 4rem;
  height: 3px;
  background-color: #ec4141;
  position: absolute;
  bottom: 0;
  left: 48px;
  // transition: all 0.5s !important;
}
</style>
